<template>
	<view>
		<view class="status_bar"></view>
		<view class="header_created">
			<uni-nav-bar left-icon="back" :border="false" backgroundColor="transparent" :title="titles" @clickLeft="backs">
			</uni-nav-bar>
			<view class="member_photos" v-show="!member">
				<image class="member_imgs" src="../../../static/me/default.png" mode=""></image>
				<text class="member_name">张庆说</text>
				<text class="member_department" v-show="!member">销售一部</text>
			</view>
			<view :class="['commission_details',member==true ? 'commission_tops':'']">
				<uni-grid :column="3" :showBorder="false">
					<uni-grid-item style="height: 108rpx;">
						<text class="commission">¥28394.82</text>
						<text class="Hint">今日获得</text>
					</uni-grid-item>
					<uni-grid-item style="height: 108rpx;">
						<text class="commission">¥58883.21</text>
						<text class="Hint">当月累计</text>
					</uni-grid-item>
					<uni-grid-item style="height: 108rpx;">
						<text class="commission">¥58883.21</text>
						<text class="Hint">迄今累计</text>
					</uni-grid-item>
				</uni-grid>
				<view class="arrow_details">
					<!-- <text :class="['text_details',revenue==true ? 'transparents':'text_details']" v-show="revenue">累计营收：5228883.21元</text> -->
					<text class="text_details" v-show="member">累计营收：5228883.21元</text>
				</view>
			</view>
		</view>
		<view v-show="member" :class="['list_time',member==true ? 'list_times':'']">
			<view class="search_criterias">
				<text v-for="(item,index) in search_criteria"
					:class="['selectno',item.selects==true ? 'selectActive':'']"
					@click="searchcriteria(index)">{{item.name}}</text>
			</view>
			<view>
				<uni-combox class="select_member" placeholder="全部成员" emptyTips="未查到"></uni-combox>
			</view>
		</view>
		<view class="search_criteria" v-show="!member">
			<text v-for="(item,index) in search_criteria" :class="['selectno',item.selects==true ? 'selectActive':'']" @click="searchcriteria(index)">{{item.name}}</text>
		</view>
		<view class="money_list">
			<text class="money_title">章程想的下级 购买商品返佣</text>
			<text class="money_num">+98.12</text>
			<view class="money_time">
				<text>2021.03.31 13:38</text>
				<text class="money_remarks">奖项</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				search_criteria: [{
						"name": '全部',
						"selects": true
					},
					{
						"name": '今天',
						"selects": false
					},
					{
						"name": '昨天',
						"selects": false
					},
					{
						"name": '过去7天',
						"selects": false
					},
					{
						"name": '过去30天',
						"selects": false
					},
				],
				pages: 0,
				enterprise: false,
				revenue:false,
				titles:'成员详情'
			}
		},
		onLoad(parameter) {
			this.pages = parameter.pages
			if (this.pages == 1) {
				console.log('我创建的按成员')
				this.member = false
			} else if (this.pages == 3) {
				this.member = true
				this.revenue= true
			}else if(this.pages == 2){
				this.member = true
				this.titles='销售一部'
			}
		},
		methods: {
			// 返回上一页
			backs() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 点击切换全部等列表
			searchcriteria(i) {
				this.search_criteria.forEach((el, index) => {
					if (index == i) {
						el.selects = true
					} else {
						el.selects = false
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background: #F5F5F5;
	}

	.status_bar {
		height: var(--status-bar-height);
		background: rgba(252, 218, 34, 1);
	}

	.header_created {
		width: 100%;
		height: 351rpx;
		background-image: url(../../../static/me/bj.png);
		background-size: 100% 351rpx;
	}

	.commission_details {
		width: 699rpx;
		height: 217rpx;
		background-image: url(../../../static/me/bj_commission.png);
		background-size: cover;
		margin: auto;
	}

	.commission {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
		margin-left: 32rpx;
		margin-top: 28rpx;
		margin-bottom: 5rpx;
	}

	.Hint {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 1;
		margin-left: 32rpx;
	}

	.search_criteria {
		width: 699rpx;
		margin-top: 106rpx;
		margin-left: 25rpx;
	}

	.search_criteria text {
		padding: 9rpx 25rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		border: 1px solid #EEEEEE;
		border-radius: 47rpx;
		opacity: 1;
		margin-right: 18rpx;
	}

	.selectno {
		background: #FCFCFC;
	}

	.search_criterias {
		width: 538rpx;
		margin-top: 50rpx;
		margin-left: 25rpx;
		overflow: scroll;
		white-space: nowrap;
		height: 50rpx;
		float: left;
		padding-top: 14rpx;
	}

	.search_criterias text {
		padding: 9rpx 25rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		border: 1px solid #EEEEEE;
		border-radius: 47rpx;
		opacity: 1;
		margin-right: 18rpx;
	}
.commission_tops{
	margin-top: 61rpx;
}
	.selectActive {
		background: #FFDC1D;
	}

	.money_list {
		width: 699rpx;
		height: 152rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 14rpx;
		margin: auto;
		margin-top: 25rpx;
	}

	.money_title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		padding: 25rpx 0 0 25rpx;
		display: inline-block;
	}

	.money_num {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EB3E3E;
		opacity: 1;
		float: right;
		padding: 25rpx 25rpx 0 0;
	}

	.money_time {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		opacity: 0.35;
		display: block;
		padding: 28rpx 0 0 25rpx;
	}

	.money_remarks {
		float: right;
		padding: 0 25rpx 0 0;
	}

	.arrow_details {
		margin-top: 54rpx;
		height: 36rpx;
		line-height: 36rpx;
	}

	.text_details {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.65;
		margin-left: 32rpx;
		display: block;
		float: left;
	}

	.member_photos {
		width: 648rpx;
		height: 83rpx;
		background: #FFFFFF;
		opacity: 1;
		margin: auto;
		border-radius: 14rpx 14rpx 0px 0px;
		margin-top: 43rpx;
	}

	.member_imgs {
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx 18rpx 0 21rpx;
		border-radius: 50%;
		float: left;
	}

	.member_name {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		float: left;
		margin-top: 30rpx;
	}

	.member_department {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FCA022;
		opacity: 1;
		float: right;
		margin-right: 21rpx;
		margin-top: 30rpx;
	}

	.select_member {
		width: 181rpx;
		float: left;
		margin-top: 38rpx;
	}

	.list_time {
		width: 100%;
		height: 141rpx;
		font-size: 21rpx;
		color: #21201D;
	}
	.list_times{
		height: 99rpx
	}
	.list_time .uni-combox__input {
	    font-size: 21rpx;
	}
	.transparents{
		color: transparent;
	}
</style>
